<template>
  <ContentWrap>
    <div>
      <div class="title_styles">
        <div class="title_details">
          订单详情-完善资料
        </div>
        <div class="reornum">
          申请订单编号：{{ orderId }}
        </div>

      </div>


      <div class="userInformation">
        <div class="top_title">
          <div class="box_style"></div>
          <div class="title_font">完善资料</div>
          <p class="title_right"></p>
        </div>
        <div>
          <el-collapse>
            <el-collapse-item :title="item.title" :name="index + 1" v-for="item,index in dataList" :key="index">
              <el-table :data="item.list" border style="width: 100%">
                <el-table-column prop="categoryName" label="检查类目项" width="500px" />
                <el-table-column prop="resultValue" label="结果" width="500px" />
                <el-table-column prop="isPassed" label="操作">
                  <template #default="scope">
                    <div class="mb-2 flex items-center text-sm">
                    <el-radio-group v-model="scope.row.isPassed" class="ml-4">
                      <el-radio label="1" size="large">达标</el-radio>
                      <el-radio label="0" size="large">未达标</el-radio>
                    </el-radio-group>
                  </div>
                  </template>
                </el-table-column>
              </el-table>
            </el-collapse-item>
          </el-collapse>
        </div>

      </div>

      <footer>
        <el-row class="mb-4">
          <div v-if="flow<=6">
            <el-button type="primary" style="width: 100px;background: #0077ce" @click="open">通过</el-button>
            <el-button type="primary" style="width: 100px;background: #ff5757" @click="sale">选项驳回</el-button>
          </div>
        </el-row>
      </footer>

    </div>
  </ContentWrap>
</template>


<script lang="ts" setup>
import * as UsersApi from "@/api/hutai/salesman";
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref } from "vue";
import { useRoute } from 'vue-router';
import { useDateFormat } from "@vueuse/core";
import {
  getPublicitySelectListByClassName,
  getSalesmanDetails,
} from "@/api/hutai/salesman";
import Footer from "@/layout/components/Footer/src/Footer.vue";
import * as ProductApi from "@/api/hutai/product";
import { any, object } from "vue-types";

const loading = ref(true) // 列表的加载中

const route = useRoute();
const orderId = route.query.id
const flow = ref(99)

//保存资料循环数据保存

let dataList = ref([
  {title:'按揭房信贷',list:[]},
  {title:'保单贷',list:[]},
  {title:'个人贴息贷',list:[]},
  {title:'工薪贷',list:[]},
  {title:'公积金贷',list:[]},
  {title:'企业贴息贷',list:[]},
  {title:'全款车按揭车信贷',list:[]},
  {title:'商业商住楼写字楼厂房一抵押',list:[]},
  {title:'商业商住楼写字楼二次抵押',list:[]},
  {title:'商业写字楼按揭贷',list:[]},
  {title:'税贷',list:[]},
  {title:'小微企业信贷',list:[]},
  {title:'信用卡贷',list:[]},
  {title:'住宅按揭贷',list:[]},
  {title:'住宅抵押贷',list:[]},
  {title:'住宅二次抵押贷',list:[]},
])
// let options1 = [];
const options1 = ref([])  //项

const handleClassChange = async (className: string,typeNams:string) => {
  //把非法字符放入encodeURI()函数，即可解决解码问题
  var f1 = encodeURI(className);
  var f2 = encodeURI(typeNams);

  options1.value = await UsersApi.getPublicitySelectListByClassName(f1,f2);
 
};


// const resetData = async (f1,f2) => {
//   // 重新初始化数据源
//   options1 = await  UsersApi.getPublicitySelectListByClassName(f1,f2);
// }


/** 查询列表 */
const getList = async () => {
  const data = await UsersApi.getSalesmanWarrantOrderInfo(orderId)
  flow.value = data.recordRespVO.flowN
  console.log(flow.value)
  const arr = await UsersApi.getInformation(orderId)
  let arrayone = reactive([])
  for(let k in arr){
    arrayone.push(arr[k])
  }
  arrayone.forEach(v => {
    v.forEach(s => {
      if(s.typeName=='完成按揭房信贷公式表'){
        dataList.value[0].list.push(s)
      }
      if(s.typeName=='完成公积金贷公式表'){
        dataList.value[4].list.push(s)
      }
      if(s.typeName=='完成住宅抵押公式表'){
        dataList.value[14].list.push(s)
      }
      if(s.typeName=='完成商业写字楼按揭贷款公式'){
        dataList.value[9].list.push(s)
      }
      if(s.typeName=='完成信用卡贷公式表'){
        dataList.value[12].list.push(s)
      }
      if(s.typeName=='完成小微企业信贷公式表'){
        dataList.value[11].list.push(s)
      }
      if(s.typeName=='完成商业商住楼写字楼二次抵押公式表'){
        dataList.value[8].list.push(s)
      }
      if(s.typeName=='完成税贷公示表'){
        dataList.value[10].list.push(s)
      }
      if(s.typeName=='完成企业贴息贷款公式表'){
        dataList.value[5].list.push(s)
      }
      if(s.typeName=='完成商业商住楼写字楼厂房一抵押公式表'){
        dataList.value[7].list.push(s)
      }
      if(s.typeName=='完成保单贷公式表'){
        dataList.value[1].list.push(s)
      }
      if(s.typeName=='完成工薪贷公式表'){
        dataList.value[3].list.push(s)
      }
      if(s.typeName=='完成个人贴息贷款公式表'){
        dataList.value[2].list.push(s)
      }
      if(s.typeName=='完成住宅二次抵押公式表'){
        dataList.value[15].list.push(s)
      }
      if(s.typeName=='完成住宅按揭贷款公式表'){
        dataList.value[13].list.push(s)
      }
      if(s.typeName=='完成全款车按揭车信贷公式表'){
        dataList.value[6].list.push(s)
      }
    })
  })
};
const sale = async () => {
  ElMessageBox.confirm(
    '资料驳回',
    '确认驳回资料',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then( async () => {
      let itemList = reactive([])
      dataList.value.forEach(v => {
        v.list.forEach(s => {
          let obj = reactive({})
          if(s.isPassed=='0'){
            obj.id = s.id
            obj.categoryName = s.categoryName
            obj.resultValue = s.resultValue
            obj.typeId = ''
            obj.isPassed = s.isPassed
            obj.typeName = s.typeName
            itemList.push(obj)
          }
        })
      })
      let parmas = {
        orderId:orderId,
        itemList:itemList,
        isPass:0
      }

      if (itemList.length>0){
        await UsersApi.cantPass(parmas).then(res => {
          console.log(res)
          if(res==true){
            ElMessage({
              message: '资料驳回成功',
              type: 'success',
            })
          }else{
            ElMessage({
              message: res,
              type: 'warning',
            })
          }
        })
      }else {
        ElMessage({
          message: '请选择驳回项',
          type: 'warning',
        })
      }


    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消',
      })
    })
  
}
const { push } = useRouter()
const open = () => {
  ElMessageBox.confirm(
    '全部资料通过',
    '确认全部资料通过',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then( async () => {
      let parmas = {
        orderId:orderId,
        itemList:[],
        isPass:1
      }
      await UsersApi.cantPass(parmas).then(res => {
      console.log(res)
        if(res==true){
          ElMessage({
            message: '资料已通过！',
            type: 'success',
          })
          setTimeout(() => {
            push({
            path:'/customer/customerDetail',
            query:{id:orderId,status:3}
          })
          },1000);
        }else{
          ElMessage({
            message: res,
            type: 'warning',
          })
        }
      })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消',
      })
    })
  })
}

/** 初始化 **/
onMounted(() => {
  getList();
});
</script>


<style lang="scss">
.barsName{
  font-weight: bold;
}

.inputs{
  width: 210px;
  padding: 10px;
}

.el_img {
  width: 15px;
  height: 15px;
}

.order_div1 {
  position: absolute;
  display: flex;
  width: 80%;
  height: 70px;
  margin-top: 170px;
  margin-left: 20px;
  justify-content: left;

  .title_styles {
    width: 100px;
    height: 30px;
    padding-top: 30px;
    margin-top: 10px;
    border: 1px rgb(240 240 240) solid;
  }
}

.order_div {
  position: absolute;
  display: flex;
  width: 80%;
  height: 70px;
  margin-top: 20px;
  margin-left: 20px;
  justify-content: left;

  .title_styles {
    width: 100px;
    height: 30px;
    padding-top: 30px;
    margin-top: 10px;
    border-bottom: 1px solid #d9d9d9;
  }
}

.steps_style {
  flex-wrap: wrap;

  el-step {
    width: 1000px;
  }
}

.information_item_style {
  flex-wrap: wrap;
  width: 250px;
  margin-top: 10px;
}

.bottom_div {
  display: flex;
  margin-top: -120px;

  .bottom_table {

  }

  .bottom_box {
    width: 120px;
    height: 40px;
    font-size: 10px;
    text-align: center;
    border: 1px solid rgb(245 245 245);
  }
}

.title_fonts {
  font-size: 10px;
}

.insureData_style {
  display: flex;
  font-size: 10px;

  .img_style {
    width: 10px;
    height: 10px;
    margin-top: 4px;
    margin-right: 5px;
  }

  .mid_font {
    font-size: 10px;
    font-weight: 900;
    color: rgb(237 109 75);
    text-decoration: underline;
  }
}

.mid_div {
  width: 150px;
  height: 90px;
  padding-top: 10px;
  margin-top: 20px;
  margin-right: 20px;
  margin-left: 20px;
  text-align: center;

  .mid_font {
    margin-top: 10px;
    font-size: 15px;
  }

  .img_style {
    width: 40px;
    height: 40px;
  }
}

.img_style {
  width: 15px;
  height: 15px;
}

.cell-item {
  display: flex;
  color: black;
  align-items: center;
}

.margin-top {
  width: 98%;
  margin: 0 auto;
}

.el-descriptions {
  margin-top: 10px;
}

.userInformation {
  width: 96%;
  min-height: 100px;
  padding: 0 0 20px;
  margin: 0 auto;
  margin-bottom: 1.5%;
  background-color: white;
  border-radius: 4px;

  .top_title {
    //padding-top: 20px;
    display: flex;
    //justify-content: space-between;
  }

  .title_right {
    width: 200px;
    font-size: 12px;
  }

  .title_font {
    width: 80%;
    margin: 6px 10px 10px;
    font-size: 16px;
    font-weight: 500;
  }

  .box_style {
    width: 2px;
    height: 15px;
    margin: 10px 0 0 10px;
    background-color: #2d8cf0;
  }
}

.title_styles {
  display: flex;
  width: 100%;
  padding: 20px;
  margin-bottom: 2%;
  border-bottom: 1px solid #e5e7eb;
  justify-content: space-between;

  .title_details {
    width: 50%;
    padding-left: 15px;
    font-size: 14px;
    font-weight: 500;
  }

  .reornum {
    width: 50%;
    padding-right: 100px;
    font-size: 13px;
    text-align: right;
  }
}

.el-descriptions__body .el-descriptions__table.is-bordered .el-descriptions__cell {
  padding: 8px 11px;
  border: var(--el-descriptions-table-border);
}

.istyle{
  .el-input__wrapper {
    padding: 0;
    background-color: transparent;
    box-shadow: none;

    .el-input__inner {
      -webkit-text-fill-color: inherit;
      color: inherit;
      cursor: text;
    }

    .el-input__suffix {
      display: none;
    }
  }
}



</style>
